<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>消息页面</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui2/css/layui.css"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" style="background-image: linear-gradient(120deg, #131313,#4c4c4c);">
        <div class="layui-logo"><a href="yuangong-main.html" style="color: #47b3ff;font-size: 25px;">员工主页</a></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a class="layui-icon" href="../guanliyuan/guanliyuan-login.html">管理员登录</a></li>
            <li class="layui-nav-item"><a class="layui-icon layui-icon-logout" style="color: #ff3c00;font-size: 20px;" href="yuangong-login.html">退出</a></li>
        </ul>
    </div>

    <div class="layui-side" style=" background-image: linear-gradient(120deg, #a7d3f2,#1E9FFF);">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree layui-bg-black"  lay-filter="test">
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-user" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i> 信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="yuangong-xinxiChange.html"><i class="layui-icon layui-icon-edit" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i>基本信息修改</a></dd>
                        <dd><a href="yuangong-mimaChange.html"><i class="layui-icon layui-icon-edit" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i>修改密码</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="yuangong-apply.html"><i class="layui-icon layui-icon-form" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i>宿舍申请</a>
                </li>
                <li class="layui-nav-item layui-bg-blue">
                    <a class="" href="letter-box.html"><i class="layui-icon layui-icon-notice" style="font-size: 24px; color: #1E9FFF; margin-right: 16px"></i>通知</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-anim layui-anim-scale">
            <script type="text/html" id="toolbar0">
<!--                <a class="layui-btn layui-btn-primary layui-icon layui-icon-delete" style="font-size: 20px;" lay-event="delete"></a>-->
            </script>
            <table class="layui-hide" id="demo" lay-filter="test"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">确定</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
    </div>
    <div class="layui-footer layui-bg-black">
    </div>
</div>
</div>
<script src="../../static/admin/layui2/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'jquery', 'element'], function() {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , $ =layui.jquery
            , element = layui.element //元素操作
    table.render({
        elem: '#demo'
        ,height: 200
        ,url: "/shengqindan/select" //数据接口
        ,title: '申请信息'
        ,toolbar: '#toolbar0' //自定义工具栏
        ,totalRow: true //开启合计行
        ,parseData:function(map) {//格式绑定后端传递过来的数据，我使用的是map对象，为了符合数据表格接受数据的样式，所以这么做的
            return {
                "code":map["code"],
                "msg":"",
                "count":map["count"],
                data:map["data"]//这个data才是表格所需要的数据，里面其实是一个list集合，存放的是n条数据记录。
            }
        }
        ,cols: [[ //表头
             {field: 'danjvbianhao',title: '单据编号', width:100}
            ,{field: 'danjushenqingriqi', title: '单据申请日期', width:120}
            ,{field: 'shenqingren', title: '申请人', width: 90}
            ,{field: 'yuangonghao', title: '员工号', width:80}
            ,{field: 'xinbie', title: '性别', width: 80}
            ,{field: 'suozaibumem', title: '所在部门', width:100}
            ,{field: 'loudongmingcheng', title: '楼栋名称', width: 100}
            ,{field: 'louceng', title: '层数', width: 80}
            ,{field: 'taofang', title: '套房', width: 80}
            ,{field: 'fangjian', title: '房间', width: 80}
            ,{field: 'puweibianhao', title: '铺位编号', width: 100}
            ,{field: 'puweimingcheng', title: '铺位名称', width: 100}
            ,{field: 'danjuzhuangtai', title: '单据状态', width: 100}
            ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
        ]],
    });

    //监听头工具栏事件
    // table.on('toolbar(test)', function(obj){
    //     var checkStatus = table.checkStatus(obj.config.id)
    //     var data1 = checkStatus.data; //获取选中的数据
    //     var data = obj.data
    //     switch(obj.event){
    //         case 'delete':
    //             if(data1.length === 0){
    //                 layer.msg('请选择一行');
    //             } else {
    //                  $.ajax({
    //                     type:"POST",
    //                     url:"/shengqindan/delete",
    //                     data:{'yuangonghao':data.yuangonghao},
    //                     success:function (res) {
    //                         if (res.flag){
    //                             window.location.href="letter-box.html";
    //                             layer.msg('删除成功')
    //                         }else {
    //                             layer.msg('删除失败' )
    //                         }
    //                     }
    //                 })
    //                 return false;
    //             }
    //             break;
    //     };
    // });

    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
            layer.msg('查看操作');
        } else if(layEvent === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
                //向服务端发送删除指令
                $.ajax({
                    type:"POST",
                    url:"/shengqindan/delete",
                    data:{'yuangonghao':data.yuangonghao},
                    success:function (res) {
                        if (res.flag){
                            window.location.href="letter-box.html";
                            layer.msg('删除成功')
                        }else {
                            layer.msg('删除失败' )
                        }
                    }
                })
            });
        }
    });

    });
</script>
</body>
</html>